<template>
  <div class="loginwork">
    <van-tabs>
      <van-tab title="注册">
        <form class="loginForm">
          <section class="input_container">
            <input
              type="text"
              placeholder="账号"
              name="account"
              v-model="account"
              autocomplete="on"
            />
          </section>
          <section class="input_container">
            <input
              type="password"
              placeholder="密码"
              name="password"
              v-model="password"
              autocomplete="on"
            />
          </section>
        </form>
        <div class="login_container" @click="registeredclick">注册</div>
      </van-tab>
      <van-tab title="登录">
        <form class="loginForm">
          <section class="input_container">
            <input
              type="text"
              placeholder="账号"
              name="account"
              v-model="account"
              autocomplete="on"
            />
          </section>
          <section class="input_container">
            <input
              type="text"
              placeholder="密码"
              name="password"
              v-model="password"
              autocomplete="on"
              v-if="xian"
            />
            <input
              type="password"
              placeholder="密码"
              name="password"
              v-model="password"
              autocomplete="on"
              v-if="xian == false"
            />

            <div :class="{ privacy: true, qie: xian }" @click="qiehuan">
              <div class="privacy_div"></div>
              <span>abc</span>
              <span>...</span>
            </div>
          </section>
          <section class="input_container captcha_code_container">
            <input
              type="text"
              placeholder="验证码"
              name="code"
              v-model="code"
            />
            <div class="validation_div">
              <IdentifyCode
                :identify-code="identifyCode"
                :content-width="90"
                :content-height="35"
              ></IdentifyCode>
              <div class="mag">
                <span class="code hui" @click="refreshCode"> 看不清 </span>
                <span class="code blue" @click="refreshCode"> 换一张 </span>
              </div>
            </div>
          </section>
        </form>

        <div class="login_container" @click="loginclick">登录</div>
        <a href="###" class="reset">重置密码？</a></van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
import IdentifyCode from "vue-identifycode"; // 引入包

export default {
  name: "LoginWork",
  components: { IdentifyCode },
  data() {
    return {
      identifyCode: "",
      inp_val1: "",
      inp_val2: "",
      bull: false,
      show: false,
      message: "无效的兑换码",
      xian: false,
    };
  },
  computed: {
    dateRange() {
      const { inp_val1, inp_val2 } = this;
      return { inp_val1, inp_val2 };
    },
  },
  watch: {
    dateRange(val) {
      if (val.inp_val1 != null) {
        if (val.inp_val2.length == 4) {
          this.bull = true;
        } else {
          this.bull = false;
        }
      } else {
        this.bull = true;
      }
    },
  },
  mounted() {
    this.identifyCode = this.createCode();
  },
  methods: {
    // 密码切换私密性
    qiehuan() {
      this.xian = !this.xian;
      if (this.type == "password") {
        this.type = "text";
      } else {
        this.type == "password";
      }
    },
    //   注册
    registeredclick() {
      if (this.account != undefined) {
        if (this.password != undefined) {
          localStorage.setItem("account", this.account);
          this.$axios
            .post("http://localhost:8888/login/regist", {
              account: this.account,
              password: this.password,
            })
            .then((res) => {
              if (res.data.code == 200) {
                this.$router.replace({ name: "MineWork" });
                this.$cookie.set("token", res.token);
                alert("注册成功");
              } else {
                alert("注册失败");
              }
            })
            .catch(function (err) {
              console.log(err);
            });
        } else {
          alert("请填写密码");
        }
      } else {
        alert("请填写账号");
      }
    },
    // 登录
    loginclick() {
      // 判断输入的验证码是否正确
      if (this.code == this.identifyCode) {
        this.$axios
          .post("http://localhost:8888/login/login", {
            account: this.account,
            password: this.password,
          })
          .then((res) => {
            if (res.data.code == 200) {
              localStorage.setItem("account", this.account);
              this.$router.replace({ name: "MineWork" });
              this.$cookie.set("token", res.token);
              alert("登录成功");
            } else {
              alert("账号不存在或密码");
            }
          })
          .catch(function (err) {
            console.log(err);
          });
      } else {
        alert("验证码错误");
      }
    },
    createCode() {
      let code = "";
      const codeLength = 4; // 验证码的长度
      // eslint-disable-next-line no-array-constructor
      const random = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9); // 随机数
      for (let i = 0; i < codeLength; i++) {
        // 循环操作
        const index = Math.floor(Math.random() * 9); // 取得随机数的索引（0~35）
        code += random[index]; // 根据索引取得随机数加到code上
      }
      return code;
    },
    refreshCode() {
      this.identifyCode = this.createCode();
    },
    exchangeclick() {
      this.show = true;
    },
    fanhuiclick() {
      this.show = false;
    },
  },
};
</script>

<style lang="less">
body,
html {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
}
.loginwork {
  .loginForm {
    background-color: #fff;
    margin-top: 0.6rem;

    .input_container {
      display: flex;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid #f1f1f1;

      input {
        font-size: 18px;
        border: none;
        color: #666;
        outline: none;
        width: 200px;
      }
      .validation_div {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .mag {
          margin-left: 8px;
          height: 35px;
          .blue {
            color: #3b95e9;
          }
        }
      }
      .privacy {
        background-color: #ccc;
        display: flex;
        justify-content: center;
        width: 2rem;
        height: 1.2rem;
        padding: 0 0.2rem;
        border: 1px;
        border-radius: 2.5rem;
        position: relative;

        .privacy_div {
          transition: all 0.3s;
          position: absolute;
          top: 0px;
          z-index: 1;
          left: -0.3rem;
          width: 1.2rem;
          height: 1.2rem;
          box-shadow: 0 0.02667rem 0.05333rem 0 rgba(0, 0, 0, 0.1);
          background-color: #f1f1f1;
          border-radius: 50%;
        }
      }
      .qie {
        background-color: #4cd964;
        .privacy_div {
          left: 1.5rem;
        }
      }
    }

    .captcha_code_container {
      font-size: 12px;
    }
  }

  .login_container {
    margin: 80px 0.5rem 1rem;
    font-size: 20px;
    color: #fff;
    background-color: #4cd964;
    padding: 0.5rem 0;
    border: 1px;
    border-radius: 0.15rem;
    text-align: center;
  }

  .reset {
    float: right;
    font-size: 0.6rem;
    color: #3b95e9;
    margin-right: 0.3rem;
  }
}
</style>